<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body>
<br>
<div class="layui-container" style="width: 500px;height: 330px;padding-top: 60px;">
    <form class="layui-form"  lay-filter="adminFrm" id="adminFrm" method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="passWord" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <input type="hidden" name="picture" id="picture" lay-verify="picture" autocomplete="off" class="layui-input">


            <div class="layui-inline">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-radius" id="test1">选择图片</button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="uploadBtn">点击上传</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1" width="190px" height="100px" style="display: none">
                        <p id="demoText"></p>
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test10" lay-submit="" lay-filter="demo1">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
<script src="lib/layui/layui.js"></script>

<script>

    layui.use(['upload','form','jquery','element'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , form = layui.form
            , element = layui.element;

        $(function (){
            $.post('/api/get',function (res){//初始化表单
                form.val("adminFrm",res.data);
                $('#demo1').attr('src', res.data.picture);
                $('#demo1').attr('style','display: inline');
            })
        })

        //监听提交
        form.on('submit(demo1)', function(data){
            var adminInfo=$('#adminFrm').serialize();
            $.post('/api/add',adminInfo,function (res) {
                console.log(adminInfo)
                layer.alert(JSON.stringify(res));
            })

            return false;
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/api/upload' //改成您自己的上传接口
            ,auto: false
            ,accept: 'images'
            ,acceptMime: 'image/*'
            ,field: 'uploadFile'
            ,bindAction: '#uploadBtn'
            , choose: function (obj) {
                //选完图片后
                obj.preview(function (index, file, result) {
                    //选图片就将#picture的输入框清空
                    $('#picture').val('');
                    //显示预览图片
                    $('#demo1').attr('style','display: inline');
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                if (res.code >0) {
                    return layer.msg(res.data);
                }else{
                    layer.alert('上传成功');
                    //将服务器存放的图片路径设置在#picture的输入框
                    $('#picture').val(res.data.src);
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        form.verify({
            picture: function(value){
                if(value.length == 0){
                    return "请先上传图片";
                }
            }
        })

    });
</script>
</body>
</html>